<template>
  <div class="dashboard-container">
    <div class="dashboard-text">欢迎来到环境保护教育平台管理后台！</div>

    <!-- 环保数据卡片 -->
    <el-row :gutter="20">
      <el-col :xs="24" :sm="12" :lg="6">
        <el-card shadow="hover">
          <template #header>
            <div class="card-title">用户总数</div>
          </template>
          <div class="card-value">{{ UserCount }}</div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :lg="6">
        <el-card shadow="hover">
          <template #header>
            <div class="card-title">环保文章数</div>
          </template>
          <div class="card-value">{{ OpusCount }}</div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :lg="6">
        <el-card shadow="hover">
          <template #header>
            <div class="card-title">资源总量</div>
          </template>
          <div class="card-value">{{ FileCount }}</div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :lg="6">
        <el-card shadow="hover">
          <template #header>
            <div class="card-title">站点访问量</div>
          </template>
          <div class="card-value">{{ IpCount }}</div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 统计图表（示例：使用 ECharts） -->
    <div class="chart-container">
      <div class="chart-box">
        <h4>用户日发文章</h4>
        <div id="userMap" class="chart" />
      </div>
      <div class="chart-box">
        <h4>站点访问趋势</h4>
        <div id="activityTrend" class="chart" />
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import getMainPageData from '@/api/main'

export default {
  name: 'Dashboard',
  data() {
    return {
      FileCount: 0,
      IpCount: 0,
      OpusCount: 0,
      UserCount: 0,
      DailyCounts: [],
      OpusDailyCounts: []
    }
  },
  mounted() {
    this.fetchData().then(() => {
      this.initCharts()
    })
  },
  methods: {
    async fetchData() {
      const res = await getMainPageData()
      this.IpCount = res.IpCount
      this.UserCount = res.UserCount
      this.OpusCount = res.OpusCount
      this.UserCount = res.UserCount
      this.DailyCounts = res.DailyCounts
      this.OpusDailyCounts = res.OpusDailyCounts
    },
    initCharts() {
      // 地图示例
      if (document.getElementById('userMap')) {
        const mapChart = echarts.init(document.getElementById('userMap'))
        const keys = this.OpusDailyCounts.map(item => item.date)
        console.log(keys)
        const values = this.OpusDailyCounts.map(item => item.count)
        mapChart.setOption({
          xAxis: {
            type: 'category',
            data: keys
          },
          yAxis: { type: 'value' },
          series: [{
            data: values,
            type: 'bar'
          }]
        })
      }

      // 环保活动趋势示例
      if (document.getElementById('activityTrend')) {
        const trendChart = echarts.init(document.getElementById('activityTrend'))
        const keys = this.DailyCounts.map(item => item.date)
        console.log(keys)
        const values = this.DailyCounts.map(item => item.count)
        trendChart.setOption({
          xAxis: {
            type: 'category',
            data: keys
          },
          yAxis: { type: 'value' },
          series: [{
            data: values,
            type: 'line'
          }]
        })
      }
    }
  }
}
</script>

<style scoped>
.dashboard-container {
  padding: 20px;
}

.dashboard-text {
  font-size: 20px;
  color: #333;
  margin-bottom: 20px;
}

.el-card {
  margin-bottom: 20px;
}

.card-title {
  font-size: 16px;
  font-weight: bold;
}

.card-value {
  font-size: 24px;
  color: #67c23a;
  margin-top: 10px;
}

.chart-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 20px;
}

.chart-box {
  flex: 1;
  min-width: 400px;
  padding: 20px;
  border-radius: 4px;
  background: #f5f7fa;
}

.chart {
  height: 400px;
  width: 100%;
}
</style>
